import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h
} from "snabbdom";

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule // attaches event listeners
]);

// 获取dom容器
const container = document.getElementById("container");

// 创建虚拟节点
// const vnode = h(
//   "div#container.two.classes",
//   { on: { click: () => console.log("div clicked") } },
//   [
//     h("span", { style: { fontWeight: "bold" } }, "This is bold"),
//     " and this is just normal text",
//     h("a", { props: { href: "/foo" } }, "I'll take you places!")
//   ]
// );
// // Patch into empty DOM element – this modifies the DOM as a side effect
// patch(container, vnode);

// const newVnode = h(
//   "div#container.two.classes",
//   { on: { click: () => console.log("updated div clicked") } },
//   [
//     h(
//       "span",
//       { style: { fontWeight: "normal", fontStyle: "italic" } },
//       "This is now italic type"
//     ),
//     " and this is still just normal text",
//     h("a", { props: { href: "/bar" } }, "I'll take you places!")
//   ]
// );
// // Second `patch` invocation
// patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

const newVnode1 = h('div', [
  h('p', '哇哈哈'),
  h('ul', [
    h('li', '矿泉水'),
    h('li', '绿茶'),
    h('li', '红茶'),
    h('li', '柠檬水'),
  ])
])

patch(container, newVnode1)

// 看节点更新
// import {
//   init,
//   classModule,
//   propsModule,
//   styleModule,
//   eventListenersModule,
//   h
// } from "snabbdom";

// const patch = init([
//   // Init patch function with chosen modules
//   classModule, // makes it easy to toggle classes
//   propsModule, // for setting properties on DOM elements
//   styleModule, // handles styling on elements with support for animations
//   eventListenersModule // attaches event listeners
// ]);

// // 获取dom容器
// const container = document.getElementById("container");

// const btn = document.getElementById('btn');

// btn.onclick = () => {
//   patch(newVnode1, newVnode2)
// }

// const newVnode1 = h('div', [
//   h('p', '哇哈哈'),
//   h('ul', [
//     h('li', {key: 'a'}, '矿泉水'),
//     h('li', {key: 'b'}, '绿茶'),
//     h('li', {key: 'c'}, '红茶'),
//     h('li', {key: 'd'}, '柠檬水'),
//   ])
// ])

// const newVnode2 = h('div', [
//   h('p', '哇哈哈'),
//   h('ul', [
//     h('li', {key: 'e'}, 'nnn'),
//     h('li', {key: 'a'}, '矿泉水'),
//     h('li', {key: 'b'}, '绿茶'),
//     h('li', {key: 'c'}, '红茶'),
//     h('li', {key: 'd'}, '柠檬水'),
//   ])
// ])

// patch(container, newVnode1)



